import { socialUserTagModel } from '@/models/socialUserTag'
import { ModalForm, ProFormColorPicker, ProFormText } from '@ant-design/pro-components'
import { observer } from 'mobx-react-lite'
import { SocialUserTagUpdateBO } from '../../../../types/tag'

const TagUpdateModal = () => {
  const bo = socialUserTagModel.updateTagBO
  return (
    <ModalForm<SocialUserTagUpdateBO>
      key={bo?.id}
      open={socialUserTagModel.updateModalState}
      onOpenChange={socialUserTagModel.setUpdateModalState}
      initialValues={socialUserTagModel.updateTagBO}
      onFinish={socialUserTagModel.saveTag}
      isKeyPressSubmit
    >
      {socialUserTagModel.isUpdate && <ProFormText label="标签id" name="id" disabled />}
      <ProFormText label="标签名称" name="tagName" rules={[{ required: true, message: '标签名称不能为空' }]} />
      <ProFormColorPicker label="文字颜色" name="tagTextColor" />
      <ProFormColorPicker label="背景颜色" name="tagBgColor" />
    </ModalForm>
  )
}

export default observer(TagUpdateModal)
